<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>淘宝商品</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #box {
            height: 360px;
            width: 240px;
            padding: 10px;
        }

        #box:hover {
            border: 1px solid #ff5500;
            cursor: pointer;
            border-radius: 10px;
        }

        .pic {
            height: 240px;
            width: 240px;
            overflow: hidden;
            border-radius: 10px;
        }

        .title {
            height: 30px;
            width: 240px;
            font-size: 15px; 
            display: flex;
            margin: 5px 5px 0 0px;
            font-weight: bold;
        }

        .mid {
            height: 30px;
            width: 240px;
            display: flex;
            margin: 5px 5px 0 0px;
        }

        .price {
            color: #ff6600;
            font-size: 20px;
            font-weight: bold;
        }

        .area {
            color: #999;
            font-size: 12px;
            font-weight: bold;
            margin-left: 20px;
            margin-top: 5px;
        }

       .down {
            height: 20px;
            width: 240px;
            color: #ff5500;
            font-size: 15px;
            margin: 5px 5px 0 0px;
            font-weight: bold;
        }

       .bottom {
            height: 20px;
            width: 240px;
            color: #999;  
            font-weight: bold;
       }
    </style>
</head>
<body>
    <div id="box">
        <div class="pic">
            <img style="height: 240px;" src="./images/tp.jpg">
        </div>
        <div class="content">
            <div class="title">长江二桥宇宙超级无敌帅气男神头像</div>
            <div class="mid">
                <div class="price">￥99.00</div>
                <div class="area">江西 上饶</div>
            </div>
            <div class="down">包邮</div>
            <div class="bottom">长江二桥</div>
        </div>
    </div>
</body>
</html>